<template>
<div>
    <div class="nav "  >
        <span class="lt mui-icon mui-icon-back "></span>
        <span class="rt mui-icon mui-icon-more " @click="showToggle"></span>

       <p>京东拼购</p>
    </div>
    <ul v-show="isShow" class="isshow">
        <li><span class="mui-icon mui-icon-home"></span><a href="#">首页</a></li>
        <li><span class="mui-icon mui-icon-search"></span><a href="#">分类搜索</a></li>
        <li><span class="mui-icon-extra mui-icon-extra-cart"></span><a href="#">购物车</a></li>
        <li><span class="mui-icon mui-icon-contact"></span><a href="#">我的京东</a></li>
        <li><span class="mui-icon mui-icon-spinner-cycle mui-spin"></span><a href="#">浏览记录</a></li>
    </ul>
    <div class="head">
        <div class="head-title">
           <span></span>
        </div>
        <input type="text" value="去京东拼购搜索 苹果橘子">
        <span class="mui-icon mui-icon-search title-lt"></span>
      <div class="head-hd">
          <div id="slider" class="mui-slider mui-fullscreen">
              <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                  <div class="mui-scroll">
                      <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                          精选
                      </a>
                      <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                          文娱
                      </a>
                      <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                          美妆
                      </a>
                      <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
                          家装
                      </a>
                      <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
                          家居
                      </a>
                      <a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
                          配饰
                      </a>
                      <a class="mui-control-item" href="#item7mobile" data-wid="tab-top-subpage-7.html">
                          数码
                      </a>
                      <a class="mui-control-item" href="#item8mobile" data-wid="tab-top-subpage-8.html">
                          日用
                      </a>
                      <a class="mui-control-item" href="#item9mobile" data-wid="tab-top-subpage-9.html">
                          汽车
                      </a>
                      <a class="mui-control-item" href="#item10mobile" data-wid="tab-top-subpage-10.html">
                          手机
                      </a>
                      <a class="mui-control-item" href="#item11mobile" data-wid="tab-top-subpage-11.html">
                          家居
                      </a>
                      <a class="mui-control-item" href="#item12mobile" data-wid="tab-top-subpage-12.html">
                          内衣
                      </a>
                  </div>
              </div>

          </div>
      </div>
    </div>
    <swipe :lunbotu=" lunbotu"></swipe>
    <div class="content">
        <ul>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>9快包邮</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>一元福利</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>好货清单</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>自营优选</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>平价超市</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>名品仓库</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>工厂直供</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>京东砍价</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>签到红包</p>
            </li>
            <li>
                <a href="#"><img src="//img13.360buyimg.com/jdphoto/jfs/t1/42694/11/4704/11153/5cdbcdffE534e5f08/6bcdafaa36a32b40.png!q70.webp" alt=""></a>
                <p>1元礼盒</p>
            </li>

        </ul>
        <div class="content-bottom">
            <a href="#"><img src="//img14.360buyimg.com/mcoss/jfs/t9907/178/2839591140/59737/badc42db/5cda721eN7e882de0.gif" alt=""></a>
        </div>
    </div>
</div>
</template>


<script>
    import swipe from'../subcomponents/swipe.vue'
    import { Toast } from "mint-ui";
    import mui from "../../lib/mui/js/mui.js";
    export default {
        data() {
            return {
                lunbotu: [],
                photo: [],
                btnText:"显示",
                isShow:true
            }
        }, created() {
            this.getlunbotu()

        },	mounted() {
            // 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
        }, methods: {
            getlunbotu() {
                this.$http.get('/user.json').then(result => {
                    console.log(result)
                    if (result.status === 200) {
                        this.lunbotu = result.body
                        console.log(this.lunbotu)

                    } else {
                        Toast("轮播图加载失败")
                    }

                })
            },
                showToggle(){
                    this.isShow = !this.isShow
                    if(this.isShow){
                        this.btnText = "隐藏"
                    }else{
                        this.btnText = "显示"
                    }
                }


        },
    components:{
        swipe
    }
    }
</script>

<style lang="scss" scoped>
    * { touch-action: none; }
.nav{
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    text-align: center;
    height: 40px;


    p{
       font-size: 16px;
        color: #000000;
        line-height: 40px;
        margin: 0;
    }
    .lt{
        margin-top: 8px;
        float: left;
    }
    .rt{
        margin-top: 8px;
        float: right;
        margin-right: 5px;
    }
}
    .isshow{
        position: absolute;
        top: 35px;
        right: 10px;
        background-color: #000000;
        color: #ffffff;
        list-style: none;
        width: 125px;
        border-radius: 5px;
        padding: 0;
        z-index: 30;

        li{
            span{
                width: 44px;
                padding: 10px;
                margin: 0 5px;
            }
            a{
                color: #ffffff;
            }
        }
    }
    .head{
        background-color: #fff;
        box-sizing: border-box;
        padding:5px 10px;
        position: relative;
        .head-title{
            display: inline-block;
            width: 75px;
            height: 40px;
            background-color: #eeeeee;
            border-radius: 25px 0 0 25px;
            position: absolute;
            top: 5px;
            left: 10px;
            padding-top: 5px;
            padding-left:10px ;
            span{

                display: block;
                margin: 0;
                width: 35px;
                height: 28px;
                background:url("https://img11.360buyimg.com/jdphoto/jfs/t1/20446/16/15033/13722/5cab4598E57d199ef/ed95ad7d467d2095.gif")  no-repeat center  ;
            }

        }
        input{
            width: 335px;
            margin: 0;
            margin-left: 60px;
            border: none;
            background-color: #eeee;
            border-radius: 0 25px 25px 0;
            color: #cccccc;
            font-size: 12px;


        }
        .title-lt{
            position: absolute;
            top: 16px;
            left: 55px;
            color: #cccccc;
            font-size: 22px;
        }
        .head-hd{
            .mui-fullscreen {
                position: static;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
                    display: inline-block;
                    width: auto;
                     padding: 0 5px;
                    border: 0;
                }
            }
        }
    }
    .content{
      height: 200px;
        ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            background-color: #fff;
            margin: 0;
            padding-top: 10px;


           padding-left:20px ;
            li{
                display: flex;
                flex-direction:column;
                align-items: center;
                margin: 5px 10px;
                img{
                    width: 40px;
                    height: 40px;
                }
            }
        }
        .content-bottom{
            img{
                width: 100%;
            }
        }
    }

</style>